<template>
  <div>
    <el-dialog
      title="编辑信息"
      :visible="dialogVisible"
      :show-close="false"
      width="750px"
    >
      <el-form
        ref="introduceDialog"
        :model="row"
        :rules="rules"
        label-width="130px"
      >
        <el-form-item label="公司名称:" prop="name" style="width: 400px;">
          <el-input
            v-model="row.name"
            size="medium"
            placeholder="请输入公司名称"
          />
        </el-form-item>
        <el-form-item label="公司介绍:" prop="des" style="width: 550px;">
          <el-input
            v-model="row.des"
            type="textarea"
            rows="6"
            size="medium"
            placeholder="请输入公司简介"
          />
        </el-form-item>
        <el-form-item label="公司图片：" prop="img">
          <upload-company-img
            :folder="folder"
            :row="row"
            @upload-success="handleUpload"
          />
          <div style="color: red;">提示：请上传 大小小于500kb，长为375px宽为110px 的图片!</div>
        </el-form-item>
        <el-form-item label="在线客服二维码：" prop="qcode">
          <upload-code
            :folder="codeFloder"
            :row="row"
            @upload-success="handleUploadCode"
          />
          <div style="color: red;">提示：请上传 大小小于500kb 的图片!</div>
        </el-form-item>
        <el-form-item label="公司地址:" prop="address" style="width: 400px;">
          <el-input
            v-model="row.address"
            size="medium"
            placeholder="请输入公司地址"
          />
        </el-form-item>
        <el-form-item label="公司固话:" prop="phone" style="width: 400px;">
          <el-input
            v-model="row.phone"
            size="medium"
            placeholder="请输入公司固话"
          />
        </el-form-item>
        <el-form-item label="公司电话1:" prop="tel1" style="width: 400px;">
          <el-input
            v-model="row.tel1"
            size="medium"
            placeholder="请输入公司电话(非必填)"
          />
        </el-form-item>
        <el-form-item label="公司电话2:" prop="tel2" style="width: 400px;">
          <el-input
            v-model="row.tel2"
            size="medium"
            placeholder="请输入公司电话(非必填)"
          />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button
          @click="handleCancel"
        >
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UploadCompanyImg from '@/components/UploadCompanyImg'
import UploadCode from '@/components/UploadCode'
export default {
  name: 'IntroduceDialog',
  components: {
    UploadCompanyImg,
    UploadCode
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      folder: 'company',
      codeFloder: 'qcode',
      rules: {
        name: [
          {
            required: true,
            message: '公司名称不能为空',
            trigger: 'blur'
          }
        ],
        des: [
          {
            required: true,
            message: '公司名称不能为空',
            trigger: 'blur'
          }
        ],
        address: [
          {
            required: true,
            message: '公司地址不能为空',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '公司固话不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleUpload(url) {
      this.row.img = url
    },
    handleUploadCode(url) {
      this.row.qcode = url
    },
    handleCancel() {
      this.$emit('cancel-dialog')
      this.$refs.introduceDialog.resetFields()
    },
    handleConfirm() {
      this.$refs.introduceDialog.validate((valid) => {
        if (valid) {
          this.$emit('confirm-dialog', {
            id: this.row.id,
            name: this.row.name,
            des: this.row.des,
            img: this.row.img,
            qcode: this.row.qcode,
            address: this.row.address,
            phone: this.row.phone,
            tel1: this.row.tel1,
            tel2: this.row.tel2
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
